<template>
  <div class="xiaoqu">
    <div class="text1" style="margin-bottom: 20px">
      咨询师姓名:<input type="text" v-model="value01" style="height: 36px" placeholder="">
      <el-button type="primary" @click="select" style="margin-left: 20px">搜索</el-button>
<!--      <el-button type="primary"  @click="shujuclear(),dialogFormVisible = true">新增标准</el-button>-->
    </div>

    <!--增加弹框1-->
    <div>
      <el-dialog title="新增擅长领域" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddate">确 定</el-button>
        </div>

      </el-dialog>
    </div>

    <!--   编辑弹框信息   --------------->
    <div>
      <el-dialog title="编辑咨询师" :visible.sync="dialogFormVisible4">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible4 = false">取 消</el-button>
          <el-button type="primary" @click="updatexinxi()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!------------------------------------------------------------------------------------------>
    <!--主页面表格-->
    <el-table
        :data="xiaoquList"
        border
        style="width: 1200px"
        color:black
        :header-cell-style="{'background-color':'#409EFF',
color:'#fff',textAlign:'center'}"
        :cell-style="{textAlign:'center'}">
      <el-table-column
          fixed
          prop="id"
          label="ID"
          width="120">
      </el-table-column>
      <el-table-column
          prop="chargeType"
          label="收费类型"
          width="120">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          width="120">
      </el-table-column>
      <el-table-column
          prop="consultCount"
          label="咨询数量"
          width="120">
      </el-table-column>
      <el-table-column
          prop="consultants.consultantName"
          label="咨询师姓名"
          width="120">
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <!--          <el-button @click="handleClick(scope.row),looklook()" type="text" size="small">查看关联门店</el-button>-->
<!--          <el-button type="text" size="small" @click="handleClick(scope.row)">编辑收费标准</el-button>-->
          <el-button type="text" size="small" @click="handleClick1(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--页码-->
    <div class="block">
      <el-pagination
          layout="prev, pager, next"
          :total="1">
      </el-pagination>
    </div>
    <!--      小谈框-->
    <div>
      <el-dialog title="是否删除" :visible.sync="dialogFormVisible3">
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiaochuxian">取 消</el-button>
          <el-button type="primary" @click="deletexinxi">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "shoufeibiaozhun",
  data() {
    return {
      value01: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        shanchanglingyu: '',
        jieshao: ''
      },
      formLabelWidth: '120px',
      xiaoquList:[],
      id:''
    }
  },
  created() {//默认请求全部商品
    this.axios.request("/ShouFei/getShouFeiMessage", {params:{
        pageNum:1,
        pageSize:10,
      }}).then((res)=>{
      this.xiaoquList = res.data.data;
      console.log(
          this.xiaoquList
      )
      console.log(
          res
      )
    }).catch((err)=>{

    })

  },
  methods: {
    handleClick(row) {
      this.dialogFormVisible4 = true;
      console.log(row);
      this.id = row.id;
      this.areaName = row.areaName;
      this.form.name = row.areaName;
    },
    handleClick1(row) {
      this.dialogFormVisible3 = true;
      console.log(row);
      this.id = row.id;
    },
    shujuclear() {
      this.form.name = '';
      this.address001 = '';
      this.form.shanchanglingyu = '';
      this.levelName = '';
      this.form.jieshao = '';
    },
    xianshid4() {
      this.dialogFormVisible4 = true;
    },
    //模糊查询
    select() {
      this.axios.post("/ShouFei/getShouFeiMessageByName", {
          consultantName:this.value01
        }).then((res)=>{
        this.xiaoquList = res.data.data;
        console.log(
            this.xiaoquList
        )
        console.log(
            res
        )
      }).catch((err)=>{

      })


    },
    //获得坐标
    getlocation() {
      this.address01 = "";
      this.address01 = this.address1.join("") + this.address001;
      this.axios.request("https://restapi.amap.com/v3/geocode/geo", {
        params: {
          key: "7f73f1aeafb9ae63dcd6122b87ee79e5",
          address: this.address01,
        }
      }).then((res) => {
        this.location1 = res.data.geocodes[0].location;
      }).catch((err) => {

      })

    },
    getMessage(row){
      return row.chargeList[0].id;
    },
    //添加小区数据
    adddate() {
      this.dialogFormVisible = false;
      this.axios.post("/ShouFei/addField", {
        areaName:this.form.name
      }).then((res) => {
        console.log(res.data);
      }).catch((err) => {

      });
      alert("添加成功");
      window.location.reload();
    },
    //      删除数据
    deletexinxi() {
      this.axios.post("/ShouFei/deleteShouFei", {
        id: this.id
      }).then((res) => {
        console.log(res.data);
      }).catch((err) => {

      });
      this.dialogFormVisible3 = false;
      alert("删除成功");
      window.location.reload();

    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    quxiaochuxian() {
      this.dialogFormVisible3 = false;
      alert("已成功取消删除");
      window.location.reload();
    },
    updatexinxi() {
      this.dialogFormVisible4 = false;
      this.axios.post("/ShouFei/updateField", {
        id:this.id,
        areaName:this.form.name
      }).then((res) => {
        console.log(res.data);
      });
      window.location.reload();
      alert("修改成功");
      this.shujuclear();
    },
  },
}
</script>
<style scoped>
.xiaoqu {
  height: 800px;
  /*background-color: red;*/
}

.txt1 {
  line-height: 36px;
  text-align: center;
}

.box {
  text-align: center;
}

</style>